<template>
    <div class="page-container">
        <!-- Toolbar Section -->
        <div class="toolbar">
            <div class="left-buttons">
                <el-button type="primary" @click="exportData">
                    <el-icon>
                        <Download />
                    </el-icon>
                    导出数据
                </el-button>
                <el-button type="danger" @click="clearData">
                    <el-icon>
                        <Delete />
                    </el-icon>
                    清空数据
                </el-button>
                <el-button v-if="showExportMediaButtons" type="warning" @click="exportCompositeImage">
                    <el-icon>
                        <Picture />
                    </el-icon>
                    导出合成图
                </el-button>
                <el-button v-if="showExportMediaButtons" type="warning" @click="exportPhotos">
                    <el-icon>
                        <Camera />
                    </el-icon>
                    导出照片
                </el-button>
            </div>

            <div class="right-buttons">
                <el-tooltip content="刷新" placement="top">
                    <el-button circle @click="refreshData">
                        <el-icon>
                            <Refresh />
                        </el-icon>
                    </el-button>
                </el-tooltip>

                <el-tooltip trigger="hover" content="查看方式" placement="top">
                    <el-dropdown placement="top-start" @command="handleViewModeChange" trigger="click">
                        <el-button>
                            <el-icon>
                                <Grid />
                            </el-icon>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="list">列表视图</el-dropdown-item>
                                <el-dropdown-item command="icon">图标视图</el-dropdown-item>
                                <el-dropdown-item divided command="toggleGroup">
                                    {{ showGroupColumn ? '隐藏分组列' : '显示分组列' }}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-tooltip>

                <el-tooltip content="导出设置" placement="top">
                    <el-button circle @click="toggleExportSettings">
                        <el-icon>
                            <Setting />
                        </el-icon>
                    </el-button>
                </el-tooltip>

                <el-tooltip content="进入全屏模式" placement="top">
                    <el-button circle @click="enterFullscreen">
                        <el-icon>
                            <FullScreen />
                        </el-icon>
                    </el-button>
                </el-tooltip>
            </div>
        </div>

        <!-- Data Display Section -->
        <div v-if="viewMode === 'list'" class="data-table">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="signature" label="签名图" width="180">
                    <template #default="{ row }">
                        <el-image v-if="row.signature" style="width: 80px; height: 40px" :src="row.signature"
                            :preview-src-list="[row.signature]" fit="contain" hide-on-click-modal />
                        <span v-else>无</span>
                    </template>
                </el-table-column>
                <el-table-column prop="photo" label="拍照图片" width="180">
                    <template #default="{ row }">
                        <el-image v-if="row.photo" style="width: 80px; height: 40px" :src="row.photo"
                            :preview-src-list="[row.photo]" fit="contain" hide-on-click-modal />
                        <span v-else>无</span>
                    </template>
                </el-table-column>
                <el-table-column prop="composite" label="合成图片" width="180">
                    <template #default="{ row }">
                        <el-image v-if="row.composite" style="width: 80px; height: 40px" :src="row.composite"
                            :preview-src-list="[row.composite]" fit="contain" hide-on-click-modal />
                        <span v-else>无</span>
                    </template>
                </el-table-column>
                <el-table-column prop="source" label="数据来源" />
                <el-table-column prop="time" label="时间" width="180" />
                <el-table-column v-if="showGroupColumn" prop="group" label="分组" width="120" />
                <el-table-column prop="status" label="状态" width="120">
                    <template #default="{ row }">
                        <el-tag :type="statusTagType(row.status)">
                            {{ row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template #default="{ row }">
                        <el-link type="primary" @click="blockItem(row)">拉黑</el-link>
                        <el-divider direction="vertical" />
                        <el-link type="primary" @click="deleteItem(row)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div v-else class="icon-view">
            <div class="icon-grid">
                <div v-for="(item, index) in tableData" :key="index" class="icon-item">
                    <el-image v-if="item.composite || item.photo" :src="item.composite || item.photo"
                        :preview-src-list="[item.composite || item.photo]" fit="cover" class="icon-image"
                        hide-on-click-modal />
                    <div v-else class="no-image">无图片</div>
                    <div class="icon-meta">
                        <div>{{ item.time }}</div>
                        <div class="icon-actions">
                            <el-link type="primary" @click="blockItem(item)">拉黑</el-link>
                            <el-divider direction="vertical" />
                            <el-link type="primary" @click="deleteItem(item)">删除</el-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pagination -->
        <div class="pagination">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" background round
                :page-sizes="[10, 20, 50, 100]" :small="false" layout="total, sizes, prev, pager, next, jumper"
                :total="totalItems" @size-change="handleSizeChange" @current-change="handleCurrentChange" :locale="{
                    total: '共 {total} 条',
                    perPage: '条/页',
                    next: '下一页',
                    prev: '上一页',
                    jumper: '前往'
                }" />
        </div>

        <!-- Fixed Action Bar -->
        <FixedActionBar :visible="true">
            <el-button type="primary" @click="exportData">
                <el-icon>
                    <Download />
                </el-icon>
                导出数据
            </el-button>
            <el-button type="success" @click="generateReport">
                <el-icon>
                    <DocumentAdd />
                </el-icon>
                生成报表
            </el-button>

            <template #right>
                <el-button @click="$router.push('/project-list')">返回活动列表</el-button>
            </template>
        </FixedActionBar>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import FixedActionBar from '@/components/common/BottomActionBar.vue'

// Toolbar state
const showExportMediaButtons = ref(false)
const viewMode = ref('list') // 'list' or 'icon'
const showGroupColumn = ref(true)

// Pagination state
const currentPage = ref(1)
const pageSize = ref(10)
const totalItems = ref(10)

// Sample data - replace with actual data from API
const tableData = ref([
    {
        signature: 'https://dummyimage.com/300x200/fff/f00&text=Hello',
        photo: 'https://fakeimg.pl/500x300/282828/?text=sign&font=lobster&backgrond=red',
        composite: 'https://baconmockup.com/200/200/',
        source: '系统采集',
        time: '2023-05-15 10:30',
        group: 'A组',
        status: '正常'
    },
    {
        signature: 'https://dummyimage.com/300x200/fff/f00&text=sign2',
        photo: 'https://picsum.photos/200/300',
        composite: 'https://picsum.photos/200/300',
        source: '系统采集',
        time: '2023-05-15 10:30',
        group: 'A组',
        status: '正常'
    },
    {
        signature: 'https://dummyimage.com/300x200/fff/f00&text=sign3',
        photo: 'https://picsum.photos/200/300',
        composite: 'https://picsum.photos/200/300',
        source: '手动上传',
        time: '2023-05-16 14:20',
        group: 'B组',
        status: '待审核'
    },
    // Add more sample data as needed
    {
        signature: '',
        photo: '',
        composite: '',
        source: '测试数据',
        time: '2023-05-17 09:15',
        group: 'C组',
        status: '已拉黑'
    }
])

// Methods
const exportData = () => {
    console.log('导出数据')
}

const clearData = () => {
    console.log('清空数据')
}

const exportCompositeImage = () => {
    console.log('导出合成图')
}

const exportPhotos = () => {
    console.log('导出照片')
}

const refreshData = () => {
    console.log('刷新数据')
}

const toggleExportSettings = () => {
    showExportMediaButtons.value = !showExportMediaButtons.value
}

const enterFullscreen = () => {
    console.log('进入全屏模式')
    // To be implemented with electron ipc
}

const handleViewModeChange = (command) => {
    if (command === 'list' || command === 'icon') {
        viewMode.value = command
    } else if (command === 'toggleGroup') {
        showGroupColumn.value = !showGroupColumn.value
    }
}

const blockItem = (item) => {
    console.log('拉黑项目', item)
}

const deleteItem = (item) => {
    console.log('删除项目', item)
}

const handleSizeChange = (val) => {
    console.log(`每页 ${val} 条`)
    pageSize.value = val
    refreshData()
}

const handleCurrentChange = (val) => {
    console.log(`当前页: ${val}`)
    currentPage.value = val
    refreshData()
}

const generateReport = () => {
    console.log('生成报表')
}

const statusTagType = (status) => {
    switch (status) {
        case '正常': return 'success'
        case '待审核': return 'warning'
        case '已拉黑': return 'danger'
        default: return 'info'
    }
}
</script>

<style scoped>

.page-container {
    padding-bottom: 80px;
    /* 为底部操作栏留出空间 */
}

.pagination {
    margin-top: 20px;
}

.pagination :deep(.el-pagination.is-background .el-pager li) {
    border-radius: 50%;
    background-color: #409eff;
    color: white;
    margin: 0 3px;
}

.pagination :deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: darkblue;
}

.pagination :deep(.el-pagination.is-background .el-pager li),
.pagination :deep(.el-pagination.is-background button) {
    min-width: 32px;
    height: 32px;
    line-height: 32px;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f5f7fa;
    border-radius: 4px;
    margin-bottom: 20px;
}

.left-buttons {
    display: flex;
    gap: 10px;
}

.right-buttons {
    display: flex;
    gap: 10px;
}

.data-table {
    margin-bottom: 20px;
}

.icon-view {
    margin-bottom: 20px;
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.icon-item {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.icon-item:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.icon-image {
    width: 100%;
    height: 180px;
    display: block;
}

.no-image {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f7fa;
    color: #909399;
}

.icon-meta {
    padding: 10px;
    font-size: 14px;
}

.icon-actions {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
</style>